<template>
  <div>
    <Title :title="title"></Title>
    <!-- 横向滑动 -->
    <div class="lateral-sliding">
      <div class="lateral-sliding-item" v-for="(item,index) in Boutique" :key="index">
        <div class="each-img">
          <img :src="item.pic" alt="" width="100%" height="100%">
        </div>
        <div class="lateral-sliding-item-text">
          <p>{{item.title}}</p>
          <p class="oDiv">{{item.descript}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "./Title";
export default {
  components: {
    Title
  },
  data() {
    return {
      title: "精选专题",
      Boutique: []
    };
  },
  mounted(){
    this.$network.getBoutique({

    }).then((res)=>{
      console.log(res.data.data)
      this.Boutique = res.data.data
    })
  }
};
</script>

<style scoped>

.lateral-sliding {
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
  background: white;
}
.lateral-sliding-item {
  display: flex;
  margin-left: 0.16rem;
  /* border: 1px solid red; */
   flex-direction: column;
}
.each-img {
  width: 6.5rem;
  height: 4rem;
}
.each-img >img{
   border-radius: 0.1rem;
}
.lateral-sliding-item-text>p:nth-child(1){
  font-size: 0.27rem;
  height: 0.8rem;
  line-height: 0.8rem;
}
.lateral-sliding-item-text>p:nth-child(2){
  font-size: 0.27rem;
 color: #a8a7a7;
}
.oDiv{
max-width:6.4rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
